<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<title>S3 Tree</title>

<link rel="stylesheet" href="main.css">

<link rel="stylesheet" href="js/jquery/themes/base/jquery.ui.all.css">
<script src="js/jquery/jquery-1.7.1.js"></script>
<script src="js/jquery/ui/jquery.ui.core.js"></script>
<script src="js/jquery/ui/jquery.ui.widget.js"></script>
<script src="js/jquery/ui/jquery.ui.accordion.js"></script>
<script src="js/jquery/ui/jquery.ui.position.js"></script>

<link rel="stylesheet"
	href="js/jquery/jquery.treeview/jquery.treeview.css">
<script src="js/jquery/jquery.treeview/jquery.treeview.js"
	type="text/javascript"></script>
<script src="js/jquery/jquery.treeview/jquery.treeview.edit.js"
	type="text/javascript"></script>

<link rel="stylesheet"
	href="js/jquery/jquery.datatable/css/demo_table_jui.css">
<link rel="stylesheet"
	href="js/jquery/jquery.datatable/css/demo_table.css">
<script src="js/jquery/jquery.dataTable/js/jquery.dataTables.js"
	type="text/javascript"></script>


<script src="js/jquery/jsrender.js" type="text/javascript"></script>
<script src="js/jquery/jquery.observable.js" type="text/javascript"></script>
<script src="js/jquery/jquery.views.js" type="text/javascript"></script>


<script src="js/cha/cha.js" type="text/javascript"></script>

<script type="text/javascript" src="js/cha/s3/listview/s3listview.js"></script>
<script type="text/javascript" src="js/cha/s3/treeview/s3treeview.js"></script>
<script type="text/javascript" src="js/cha/s3/login/loginview.js"></script>
<script type="text/javascript"
	src="js/cha/s3/bucketselector/bucketselectview.js"></script>
<script type="text/javascript"
	src="js/cha/s3/S3Navigator.js"></script>

</head>
<body>
	<div id=login></div>
	<div id="s3main">
	<div id="navigator">
		<div id=buckets></div>
		<div id=tree></div>
	</div>
	<div id="content">
		<div id=list></div>
	</div>
	</div>
	<script type="text/javascript">
	var eventBus = new $.cha.EventBus();
	var navigator = new $.cha.s3.Navigator(eventBus);
	navigator.bind();
    $(function() {
      $("#login").s3loginview({
        login : login
      });

    });
    function login(result) {
      var s3client = $("#login").s3loginview("getS3client");
      $("#login").remove();
      $("#buckets").s3bucketselectview({
        result : result,
        s3client : s3client,
        selectBucket : selectBucket
      });
    }

    function selectBucket(bucketName) {
      var prefix = window.location.hash;
      if(prefix){
        prefix = "";
      }
      var s3client = $("#buckets").s3bucketselectview("getS3client");
      $("#tree").children().remove();
      var div = $("<div></div>");
      $(div).appendTo($("#tree"));
      $(div).s3treeview({
        s3client : s3client,
        bucket : bucketName,
        prefix : prefix,
        eventBus:eventBus
      });
      var div2 = $("<div></div>");
      $("#list").children().remove();
      $(div2).appendTo($("#list"));
      $(div2).s3listview({
        s3client : s3client,
        bucket : bucketName,
        prefix : prefix,
        eventBus:eventBus
      });
    }
    (function($) {
      $(function() {
        $('#content').position({
          my : 'left top',
          at : 'right top',
          of : $('#navigator')
        });
      });
    })(jQuery);
</script>
</body>
</html>